<script setup>
import { nextTick, reactive, ref } from "vue";
import { useRouter } from "vue-router";
import { Message } from "@arco-design/web-vue";
import schoolApi from "@/api/schoolApi";
import userApi from "@/api/userApi";
import classesApi from "@/api/classesApi";
const router = useRouter();

const submitForm = ref();
const searchForm = ref();
const searchModel = reactive({
  schoolId: "",
  gradeId: "",
});
const visible = ref(false);
let submitData = ref({
  schoolId: "",
});
const loading = ref(false);
const gradeList = ref([]);
let schoolList = reactive([]);

const pagination = reactive({
  total: 0,
  current: 1,
  pageSize: 15,
  showPageSize: true,
  pageSizeOptions: [15, 25, 30, 50],
  showTotal: true,
  pageChange: (current) => {
    pagination.current = current;
    search(current, pagination.pageSize);
  },
  pageSizeChange(size) {
    pagination.pageSize = size;
    search(pagination.current, size);
  },
});

const columns = [
  {
    title: "班级名称",
    dataIndex: "name",
  },
  {
    title: "班级编号",
    dataIndex: "code",
  },
  {
    title: "学生人数",
    slotName: "studentCount",
  },
  {
    title: "创建时间",
    dataIndex: "createTime",
  },
  {
    title: "操作",
    slotName: "action",
    fixed: "right",
    width: 200,
  },
];
const data = ref([]);

const showAddDialog = () => {
  visible.value = true;
  submitForm.value.resetFields();
  submitData.value = {
    schoolId: "",
  };
};

const editRecord = (record) => {
  visible.value = true;
  nextTick(() => {
    submitForm.value.resetFields();
    submitData.value = Object.assign({}, record);
  });
};

const deleteRecord = (record) => {
  classesApi
    .delete({
      id: record.id,
    })
    .then((res) => {
      search(1, 15);
    });
};

const handleSubmitSuccess = (values, e) => {
  classesApi.save(values).then((res) => {
    visible.value = false;
    Message.success("保存成功");
    search(1, 15);
  });
};

const querySchoolList = () => {
  userApi
    .queryManagerSchoolList()
    .then((res) => {
      schoolList = res;
      if (res.length == 1) {
        searchModel.schoolId = res[0].id;
        getGradeList();
        refresh();
      }
    });
};

const schoolChange = () => {
  getGradeList();
}

const getGradeList = () => {
  schoolApi
    .getGradeList({
      schoolId: searchModel.schoolId,
    })
    .then((res) => {
      gradeList.value = res;
    });
};

const search = (current = 1, size = 15) => {
  var params = {
    pageNo: current,
    pageSize: size,
    queryParam: Object.assign({}, searchModel),
  };
  loading.value = true;
  classesApi.classesPage(params).then((res) => {
    data.value = res.records;
    pagination.total = res.total;
    loading.value = false;
  });
};

const refresh = () => {
  search(1, 15);
};

const reset = () => {
  searchForm.value.resetFields();
};

querySchoolList();
</script>

<template>
  <div class="main-con">
    <a-card>
      <a-form ref="searchForm" layout="inline" :model="searchModel" :label-col-props="{ span: 8 }"
        :wrapper-col-props="{ span: 16 }" label-align="left">
        <a-form-item field="schoolId" label="选择学校">
          <a-select style="width: 260px;" v-model="searchModel.schoolId" placeholder="请选择" allow-clear
            @change="schoolChange">
            <a-option v-for="s in schoolList" :key="s.id" :label="s.name" :value="s.id"></a-option>
          </a-select>
        </a-form-item>
        <a-form-item>
          <a-space>
            <a-button type="primary" @click="search(1, 15)">
              <template #icon>
                <icon-search />
              </template>
              查询
            </a-button>
            <a-button @click="reset">

              <template #icon>
                <icon-refresh />
              </template>
              重置
            </a-button>
          </a-space>
        </a-form-item>
      </a-form>
      <div class="toolbar" style="margin-top: 16px;">
        <a-space>
          <a-button size="small" :disabled="!searchModel.schoolId" type="primary" @click="showAddDialog"
            style="margin-right: 50px;">

            <template #icon>
              <icon-plus />
            </template>
            新增班级
          </a-button>
          <a-radio-group v-model="searchModel.gradeId" @change="refresh" type="button">
            <a-radio v-for="grade in gradeList" :key="grade.id" :value="grade.id">{{
        grade.name
      }}</a-radio>
          </a-radio-group>

        </a-space>
      </div>
      <a-table :columns="columns" row-key="id" :loading="loading" :data="data" @page-change="pagination.pageChange"
        @page-size-change="pagination.pageSizeChange" :pagination="pagination" :bordered="false">

        <template #studentCount="{ record }">
          <div>
            <span>{{ record.studentCount + "人" }}</span>
            <span>（男{{
        record.studentMaleCount + " 女" + record.studentFemaleCount
      }}）</span>
          </div>
        </template>

        <template #action="{ record }">
          <a-space>
            <a-button type="text" @click="editRecord(record)">编辑</a-button>
            <a-popconfirm content="确认要删除该数据吗？" @ok="deleteRecord(record)">
              <a-button type="text">删除</a-button>
            </a-popconfirm>
          </a-space>
        </template>
      </a-table>
    </a-card>
    <a-modal v-model:visible="visible" width="500px" title="新增班级" :footer="null">
      <a-form ref="submitForm" size="large" :model="submitData" @submit-success="handleSubmitSuccess">
        <a-form-item field="schoolId" label="所属学校" :rules="[{ required: true, message: '请选择所属学校' }]">
          <a-select v-model="submitData.schoolId" placeholder="请选择学校" allow-clear @change="schoolChange">
            <a-option v-for="s in schoolList" :key="s.id" :label="s.name" :value="s.id"></a-option>
          </a-select>
        </a-form-item>
        <a-form-item field="gradeId" label="所属年级" :rules="[{ required: true, message: '请选择所属年级' }]">
          <a-select :disabled="submitData.id" v-model="submitData.gradeId" placeholder="请选择所属年级">
            <a-option v-for="grade in gradeList" :key="grade.id" :value="grade.id">{{ grade.name }}</a-option>
          </a-select>
        </a-form-item>
        <a-form-item field="name" label="班级名称" :rules="[{ required: true, message: '请输入班级名称' }]">
          <a-input v-model="submitData.name" placeholder="请输入班级名称" />
        </a-form-item>
        <a-form-item field="code" label="班级编号">
          <a-input v-model="submitData.code" placeholder="请输入班级编号" />
        </a-form-item>
        <a-form-item>
          <a-space>
            <a-button html-type="submit" type="primary">保存</a-button>
            <a-button @click="() => {
        visible = false;
      }
        ">取消</a-button>
          </a-space>
        </a-form-item>
      </a-form>
    </a-modal>
  </div>
</template>

<style scoped></style>
